<template lang="html">
  <Panel :title="'理财精选'" :class="$style.panel">
    <section :class="$style.content">
      <div v-for="item in items" :key="item.title" :class="$style.item">
        <h4 :class="$style.title">
          {{ item.title }}
          <span :class="$style.sub">{{ item.sub }}</span>
        </h4>
        <p :class="$style.rate">{{ item.rate }}</p>
        <p :class="$style.text">{{ item.text }}</p>
      </div>
    </section>
  </Panel>
</template>
<script>
import Panel from "../core/panel";
export default {
  components: {
    Panel
  },
  data() {
    return {
      items: [
        {
          title: "定期理财",
          sub: "理财首选",
          rate: "5.60%",
          text: "历史年化回报率"
        },
        {
          title: "小白理财",
          sub: "理财首选",
          rate: "4.22%",
          text: "7日年化收益率"
        },
        {
          title: "月月盈",
          sub: "养老保障",
          rate: "5%",
          text: "七日年化收益率"
        },
        {
          title: "小白基金",
          sub: "天天赚钱",
          rate: "4.27%",
          text: "7日年化收益率"
        }
      ]
    };
  }
};
</script>
<style lang="scss" module>
@import "../../style/element.scss";
.panel {
  @include panel;
  .content {
    @include flex(row);
    justify-content: space-around;
    box-sizing: border-box;
    &::after {
      content: "";
      width: 100%;
      height: 0px;
      display: block;
      border: 1px solid #dddddd;
      box-sizing: border-box;
      position: relative;
      top: -195px;
    }
    .item {
      width: 50%;
      padding: 34px 16px;
      box-sizing: border-box;
      position: relative;
      &::after {
        content: "";
        display: block;
        width: 1px;
        height: 136px;
        border: 1px solid #eeeeee;
        position: absolute;
        top: 50%;
        margin-top: -68px;
        right: 0;
      }
      &:nth-child(2n) {
        &::after {
          display: none;
        }
      }
      .title {
        color: #333333;
        font-size: 30px;
        .sub {
          border: 1px solid #ff5151;
          color: #ff5151;
          font-size: 22px;
          padding: 0 4px;
        }
      }
      .rate {
        font-size: 44px;
        color: #ff5155;
        font-weight: 700;
        height: 58px;
        line-height: 58px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .text {
        font-size: 24px;
        color: #999999;
        height: 34px;
        line-height: 34px;
      }
    }
  }
}
</style>
